<template>
  <div>
    <el-card>
    <div class="search">
      <el-form :model="queryinfo" :inline="true">
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryinfo.status"
            placeholder="全部"
            clearable
            style="width: 200px"
          >
            <el-option label="待处理" value="0" />
            <el-option label="已处理" value="1" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleData"  v-hasPerm="['sys:userReport:get']"><i-ep-search />搜索</el-button>
          <el-button @click="resetQuery">
            <i-ep-refresh />
            重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-button
      type="danger"
      :disabled="ids.length === 0"
      @click="deleteClick()"
      v-hasPerm="['sys:userReport:delete']"
      ><i-ep-delete />删除</el-button
    >
  </el-card>

  <el-card>
    <el-table
      :data="reportListInfo"
      v-loading="loading"
      border
			:header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="40" />
      <!-- <el-table-column prop="id" label="序号" width="60" /> -->
			<!-- <el-table-column  label="序号" width="100">
    			<template #default="scope">
					<span>{{scope.$index+1}}</span>
     			 </template>
   			 </el-table-column> -->
					<el-table-column
                fixed
                type="index"
                :index="indexMethod"
                label="序号"
                width="70"
              />
			<el-table-column prop="category" label="资源类型" width="90">
        <template #default="scope">
          <span>
						{{  resourceType[scope.row.category]  }}
					</span>
        </template>
      </el-table-column>
      <el-table-column prop="reportUsername" label="举报者" width="80" />
      <!-- <el-table-column prop="category" label="资源类型" width="100" /> -->
      <el-table-column prop="reason" label="举报原因" width="100" />
      <!-- <el-table-column prop="proof" label="证据" width="140" /> -->
			<el-table-column label="证据" width="140">
            <template #="{ row }">
                  <!-- <img :src="row.proof" alt="" style="width: 100px; height: 100px" /> -->
									<el-image
      							style="width: 100px; height: 100px"
     							 :src="row.proof"
     							 :zoom-rate="1.2"
      							:max-scale="7"
     							 :min-scale="0.2"
     							 :preview-src-list="[row.proof]"
										:preview-teleported="true"
										hide-on-click-modal
   							 />
            </template>
      </el-table-column>
      <el-table-column prop="managerUsername" label="管理员" width="80" />
      <!-- <el-table-column prop="result" label="处理结果" width="100" /> -->
      <el-table-column prop="createTime" label="创建时间" width="160" />
      <el-table-column prop="manageTime" label="处理时间" width="160" />

			<el-table-column prop="result" label="处理结果" width="80">
        <template #default="scope">
          <span>
						{{  reportResults[scope.row.result]  }}
					</span>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <span v-if="scope.row.status === 0">待处理</span>
          <span v-else-if="scope.row.status === 1">已处理</span>
          <span v-else-if="scope.row.status === 2">违规</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="Operations" width="180">
        <template #default="scope">
          <el-button type="primary" @click="reportClick(scope.row.id)"   v-hasPerm="['sys:userReport:auth']" >审核</el-button>

          <el-button type="danger" @click="deleteReportInfo(scope.row.id)"  v-hasPerm="['sys:userReport:delete']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
					 <!-- 分页搜索 -->
					 <div
              style="
                display: flex;
                justify-content: center;
                width: 100%;
                margin-top: 15px;
              "
            >
              <el-pagination
                background
                layout="sizes, prev,slot, next, jumper"
                :page-count="pageTotal"
                :page-sizes="[10, 20, 30, 50]"
                :current-page="activePager"
                @update:current-page="pageChange"
                @update:page-size="sizeChange"
                :default-current-page="1"
                :default-page-size="10"
              >
                <div class="pagination">
                  <span
                    class="pagination__item"
                    :class="{ active: activePager === pager }"
                    v-for="pager in pageArr"
                    :key="pager"
                    @click="pageChange(pager)"
                  >
                    {{ pager }}
                  </span>
                </div>
              </el-pagination>
            </div>
            <!-- 分页搜索 -->
  </el-card>

  <el-dialog v-model="reportVisible" title="审核结果">
    <el-form :model="form">
      <el-form-item label="审核结果为" :label-width="formLabelWidth">
        <!-- <el-input v-model="form.result" autocomplete="off" /> -->
				<el-select
            v-model="form.result"
            placeholder="审核"
            clearable
            style="width: 200px"
          >
            <el-option label="下架" value="Down" />
            <el-option label="理由不充分" value="None" />
          </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="reportVisible = false">取消</el-button>
        <el-button type="primary" @click="examineInfo"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reportResourceList, reportResourceInfo } from "../../../api/report/type";
import { onMounted, reactive, ref } from "vue";
import {
  getResourceReportList,
  examineResource,
  deleteResourceReport,
  deleteResourceReportList,
	getResourceType,
	getResult
} from "../../../api/report/index";
import { ElForm, ElMessage,ElMessageBox } from "element-plus";

const reportListInfo = ref<reportResourceList[]>([]);

//资源类型枚举
const  resourceType = ref<any>();

//结果枚举
const  reportResults  = ref<any>();

const loading = ref(false);

const queryinfo = reactive<reportResourceInfo>({
  pageNum: 1,
  pageSize: 10,
});


//总共页数
const pageTotal = ref(0);
//后端传来的页码数组
const pageArr = ref([]);
//当前页码
const activePager = ref(1);

const indexMethod = (index: number) => {
  return index + (activePager.value - 1) * queryinfo.pageSize + 1;
};


const reportVisible = ref(false);
const formLabelWidth = "140px";
const ids = ref([]);

/**
 * 处理结果
 */
const form = reactive({
  id: 0,
  result: "",
});

/**
 * 管理员删除举报
 */

async function deleteReportInfo(id: number) {
  await ElMessageBox.confirm("确认删除?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(function () {
    deleteResourceReport(id).then(() => {
      ElMessage.success("删除成功");
      handleData();
    });
  });
}

function handleSelectionChange(selection: any) {
  ids.value = selection.map((item: any) => item.id);
}

async function deleteClick() {
  let idList = ids.value as number[];
  await ElMessageBox.confirm("确认删除?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(function () {
    deleteResourceReportList(idList).then(() => {
      ElMessage.success("删除成功");
      handleData();
    });
  });
}

function reportClick(id:number) {
  reportVisible.value = true;
	form.id = id;
	form.result = '';
}

/**
 * 审核举报
 */
async function examineInfo() {
	if(form.result === ''){
		ElMessage.warning('请输入审核结果！')
		return;
	}
  await examineResource(form)
    .then(() => {
      ElMessage.success("审核成功");
			handleData();
      reportVisible.value = false;
    })
    .catch((error) => {
      console.error("Error:", error);
    })
    .finally(() => (loading.value = false));
}

/**
 * 重置
 */
async function resetQuery() {
  handleData();
}

/**
 * 获取举报列表
 */
async function handleData() {
  loading.value = true;
  await getResourceReportList(queryinfo)
    .then(({ data }) => {
      reportListInfo.value = data.data;
      console.log(reportListInfo);
			pageTotal.value = data.navigatepageNums[data.navigatepageNums.length - 1];
    pageArr.value = data.navigatepageNums;
    })
    .catch((error) => {
      console.error("Error:", error);
    })
    .finally(() => {
      loading.value = false;
    });
}

/**
 * 获取内容类型
 */
 async function handleResourceType() {
  loading.value = true;
  await getResourceType()
    .then(({ data }) => {
      resourceType.value = data;
      console.log(resourceType.value);
    })
    .catch((error) => {
      console.error("Error:", error);
    })
    .finally(() => {
      loading.value = false;
    });
}

/**
 * 获取举报结果
 */
 async function handleResult() {
  loading.value = true;
  await getResult()
    .then(({ data }) => {
      reportResults.value = data;
      console.log(reportResults.value);
    })
    .catch((error) => {
      console.error("Error:", error);
    })
    .finally(() => {
      loading.value = false;
    });
}

async function pageChange(pageNum: number) {
  queryinfo.pageNum = pageNum;
  activePager.value = pageNum;
	handleData();
}

async function sizeChange(sizeNum: number) {
  queryinfo.pageSize = sizeNum;
  handleData();
}

onMounted(() => {
  handleData();
	handleResourceType();
	handleResult();
});
</script>


<style scoped>

	.pagination {
  display: flex;
  justify-content: center;
}

.pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 5px;
  cursor: pointer;
  border: 1px solid #ccc;
}

.pagination__item.active {
  color: white;
  background-color: #4593ff;
}

</style>
